<template>
    <div>
        <el-form ref="form" :model="form" label-width="100px" v-show="!isResponse">
            <el-form-item label="有效期(天)">
                <el-radio-group v-model="form.timeRange">
                    <el-radio label="1"></el-radio>
                    <el-radio label="7"></el-radio>
                    <el-radio label="30"></el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="提取码">
                <el-input v-model="form.code" placeholder="不填写则为系统随机生成"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitShare" :loading="isLoading">立即创建</el-button>
                <!-- <el-button>取消</el-button> -->
            </el-form-item>
        </el-form>
        <el-descriptions title="分享成功" v-show="isResponse" :column="1">
            <el-descriptions-item label="分享链接">{{ response.url }}</el-descriptions-item>
            <el-descriptions-item label="提取码">{{ response.code }}</el-descriptions-item>
            <el-descriptions-item label="有效期">{{ response.timeRange }}天</el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<script>
export default {
    name: "my-share-file",
    props: ['file'],
    data() {
        return {
            form: {
                code: "",
                timeRange: null,
                fileId: null
            },
            isResponse: false,
            response: {
                code: null,
                timeRange: null,
                url: null
            },
            isLoading: false
        }
    },
    mounted() {
        this.$bus.$on('busCloseMyShare', () => {
            this.form = {}
            this.isResponse = false
        })
    },
    methods: {
        async submitShare() {
            this.isLoading = true
            this.form.fileId = this.file.id
            let res = await this.$store.dispatch("saveShareFile", this.form)
            this.isLoading = false
            if (res.success) {
                this.$message.success(res.message)
                this.response = res.data
                this.isResponse = true
            }
            else this.$global.resError(res)
        }
    },
    beforeDestroy() {
        this.$bus.$off('busCloseMyShare')
    },
}
</script>

<style scoped></style>